<template>
  <div class="crumbs">
    <span class="menuName">
      <el-tooltip effect="dark" :content="toolTipMsg" placement="bottom-start">
        <img
          style="
            display: inline-block;
            width: 36px;
            height: 36px;
            cursor: pointer;
            margin-right: 10px;
          "
          src="@/assets/images/sport.gif"
          v-debounce2="{ fn: tip }"
          :class="['animate__animated', tipFlag && 'animate__shakeX']"
          alt=""
        />
      </el-tooltip>
      <slot name="title">
        {{ $t($route.meta.title) }}
      </slot>
    </span>
    <slot></slot>
  </div>
</template>

<script setup lang="ts" name="crumbs">
import { useSingleMessage } from '@/hooks/element/useSingleMessage'
import { ref } from 'vue'

const arr = [
  '自己的体重都无法掌控，就别奢谈掌控人生了。',
  '运动的精髓不在与他人拼胜负，而在于专注与自我超越。',
  '放弃可以找到一万个理由，坚持只需一个信念！',
  '不怕千人阻挡，只怕自己投降。逆风的方向，更适合飞翔。',
  '让激情进发，为生命喝彩。',
  '健我之身，强我之骨，壮我之志。',
  '宝剑锋从磨砺出，梅花香自苦寒来。',
  '不瘦下去，怎么亮瞎那些嘲笑者的双眼。',
  '现实中用不了美颜相机！',
  '赘肉不可怕，谁露谁尴尬！'
]
const getContent = () => {
  return arr[Math.floor(Math.random() * 10)]
}

const tipFlag = ref(false)
const toolTipMsg = ref(getContent())

const tip = () => {
  tipFlag.value = !tipFlag.value
  toolTipMsg.value = getContent()
  useSingleMessage.success('别点我啦，点我我也做不快！')
}
</script>

<style scoped lang="less">
.crumbs {
  width: 100%;
  height: 40px;
  padding: 0 5px;
  box-sizing: border-box;
  background: @primaryColor;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: @primaryTextColor;
  .menuName {
    display: flex;
    align-items: center;
    height: 100%;
    i {
      margin-right: 10px;
      font-size: 18px;
    }
  }
}
</style>
